<template>
  <div class="app-container">
    <!-- 晶粹兑换记录 -->
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span v-if="authorityHandle(87)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(87)"
        v-model="listQuery.userType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">兑换时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="$refs.hqSearchDown.searchFun()" />
    </div>

    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      border
      fit
      highlight-current-row
      :show-summary="authorityHandle(199)"
      :summary-method="getSummaries"
      style="width: 100%; border-radius: 8px; margin-top: 30px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column min-width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="userMobile" min-width="100px" label="玩家用户名" align="center" />
      <el-table-column prop="ammo" min-width="100px" label="消耗晶粹" align="center" />
      <!-- <el-table-column prop="price" min-width="100px" label="消耗95币" align="center" /> -->
      <el-table-column prop="dataName" min-width="100px" label="兑换饰品" align="center" />
      <el-table-column prop="customPrice" min-width="100px" label="饰品价值" align="center" />
      <el-table-column prop="createTime" min-width="100px" label="兑换时间" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listConsumeData } from '@/api/bullet/index'
import { ammoSumPrice } from '@/api/data/data'
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索

export default {
  name: 'Extension',
  components: { Pagination, hqSearchDown },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        {
          label: '用户账号',
          rigth: true,
          value: 'userMobile'
        }, {
          label: '所属主播',
          value: 'anchorName'
        }, {
          label: '兑换饰品',
          value: 'dataName'
        }
      ],
      timeValue: '',
      listData: [],
      payAmount: 0,
      shareAmount: 0,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        startTime: '', // 最终创建时间",
        endTime: '', // 最早支付时间",
        userType: '', // 最早支付时间",
        key: '' // 饰品名称'
      },
      // 消耗晶粹
      ammo: '',
      // 饰品价值
      custom_price: '',
      paramData: {}
    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    this.tableDate()
  },
  methods: {
    loadData(v) {
      this.paramData = {}
      this.paramData = { ...v, ...this.listQuery }
      listConsumeData(this.paramData).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
      })
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1
      this.tableDate()
      this.loadData(v)
    },
    tableDate() {
      // if (!this.authorityHandle(199)) return
      this.$nextTick(() => {
        const html2 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[2]
          .querySelector('.cell')
        html2.innerHTML = `${this.ammo !== '' ? this.ammo : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html2.onclick = () => {
          ammoSumPrice({ field: 'ammo', ...this.paramData }).then(res => {
            this.ammo = res.data
            this.tableDate()
          })
        }
        // const html3 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
        //   .querySelectorAll('td')[3]
        //   .querySelector('.cell')
        // html3.innerHTML = `${this.price !== '' ? this.price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        // html3.onclick = () => {
        //   ammoSumPrice({ field: 'price', ...this.paramData }).then(res => {
        //     this.price = res.data
        //     this.tableDate()
        //   })
        // }
        const html5 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[4]
          .querySelector('.cell')
        html5.innerHTML = `${this.custom_price !== '' ? this.custom_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html5.onclick = () => {
          ammoSumPrice({ field: 'custom_price', ...this.paramData }).then(res => {
            this.custom_price = res.data
            this.tableDate()
          })
        }
      })
    },
    /**
     * 合计
     * @param {obj} param
     */
    getSummaries(param) {
      const {
        columns
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'ammo') {
          sums[index] = ''
        } else if (column.property === 'price') {
          sums[index] = ''
        } else if (column.property === 'customPrice') {
          sums[index] = ''
        }
      })
      return sums
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .right-item {
    margin-right: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
</style>
